<style type="text/css">
	

      button:focus {
        outline: none;
        background-color: #fff!important;
      }


      /*nomer jawaban*/
      .contente {margin-top:20px; margin-left:20px; margin-bottom:20px; margin-right:20px; width:330px; z-index:20; border-style:solid; border:thin;
        border-color:#ccc; padding:20px; background-color:#FFF; overflow:scroll; height:460px; font:12px/25px Verdana, Arial, Helvetica, sans-serif;}

      @media (max-width: 500px) {  /*breakpoint*/
        .contente {margin-top:20px; margin-left:20px; margin-bottom:20px; margin-right:20px; width:200px; z-index:20; border-style:solid; border:thin;
          border-color:#ccc; padding:20px; background-color:#FFF; overflow:scroll; height:160px; font:12px/25px Verdana, Arial, Helvetica, sans-serif;}
      }
      .item   {width: 50px; height: 50px; /* background-color: green; */ border:#313132; color:#fff; border-style:solid;  margin-bottom: 17px;font-size:18px; line-height:normal;}

      #awal {color:#FFF; font-family:Arial, Helvetica, sans-serif; line-height: 90%; margin:0px auto;  margin-top:20px;}
      #ahir {color:#FFF; font-family:Arial, Helvetica, sans-serif; line-height: 120%; margin:0px auto; margin-top:10px;}
      #noti-count {position:absolute; top:-12px; right:-15px; background-color:white; color:#313132; padding:5px; -webkit-border-radius: 30px;
          -moz-border-radius: 30px; border-radius: 30px; border-style:solid; border-color:#313132; width:30px; height:30px; text-align:center;}
      #noti-count div {margin-top:-5px;}


      /*end nomer jawaban*/
      [type="radio"]:not(:checked) + label:before,
      [type="radio"]:not(:checked) + label:after {
        border: none;
      }


      input[type="radio"] {opacity:0.2;  position:absolute;}  /*left:-10000;*/
      /*input[type="radio"] + label {cursor: pointer;}*/
      .A {background: url("<?= base_url("asset/img/A.png"); ?>");}
      .B {background: url("<?= base_url("asset/img/B.png"); ?>");}
      .C {background: url("<?= base_url("asset/img/C.png"); ?>");}
      .D {background: url("<?= base_url("asset/img/D.png"); ?>");}
      .E {background: url("<?= base_url("asset/img/E.png"); ?>");}
      .button-jawaban {
      	width: 20px!important;
      	height: 20px!important;
      	border: none!important;
      }
      .jawaban-salah{
      	background: red;
      	color: white;
      	text-align: center;
      	border-radius: 100%;
      	width: 30px;
      	line-height: 30px;
      }
      .jawaban {padding-bottom:10px; font-size: 10pt; border:solid; border-color:#CCC;} 
      .pilihanjawaban {font-size: 10pt;} 
      .noti-jawab {position:absolute; background-color:white; color:#999; padding:4px;  -webkit-border-radius: 30px;
          -moz-border-radius: 30px; border-radius: 30px; border-style:solid; border-color:#999; width:27px; height:27px; text-align:center;}
      .flatRoundedCheckbox {width: 120px; height: 40px; margin: 20px 50px; position: relative;}
      .flatRoundedCheckbox div {width: 100%; height:100%; background: #d3d3d3; border-radius: 50px; position: relative; top:-30px;}     
      .cc-selector input {margin-left:0px; padding:0; -webkit-appearance:none; -moz-appearance:none; appearance:none; margin-top:-90px; top:-90px;}
      .pilih-jawaban {margin-left:0; border-radius: 30px; border-style:solid; border-color:#999; list-style:none;}
      .pilih-jawaban {background-image:url("<?= base_url("asset/img/pilih.png"); ?>"); -webkit-filter: none; -moz-filter: none; filter: none;}
      .kunci-jawaban {background-image:url("<?= base_url("asset/img/benar.png"); ?>"); -webkit-filter: none; -moz-filter: none; filter: none;}
      .drinkcard-cc { background-size:contain; background-repeat:no-repeat;}



       .jp-volume-controls { display:block}
    /*   .jp-progress{ display:block}
       .jp-duration{ display:block}  */ 
       .jp-progress{ display:none}
       .jp-duration{ display:none}      
       .jp-time-holder{ display:block}  
       .jp-volume-bar{ max-width:50px   }
      @media screen and (max-width: 500px) {
      }
</style>
<div class="page">
	<table>
		<tr>
			<td>
				<table>
					<tr>
						<td>Nama</td>
						<td>: <?= $ujian->XNamaSiswa; ?></td>
					</tr>
					<tr>
						<td>Kelas</td>
						<td>: <?= $ujian->KelasSiswa; ?></td>
					</tr>
					<tr>
						<td>Ujian</td>
						<td>: <?= $ujian->XKodeUjian; ?> | <?= $ujian->XKodeSoal; ?> | <?= $ujian->XGuru; ?> => <b><?= $ujian->XTokenUjian;?></b> </td>
					</tr>
				</table>
			</td>
			<td>
				<?php
				$this->db->where([
					'XTokenUjian' => $ujian->XTokenUjian,
					'XNomerUjian' => $ujian->XNomerUjian,
					'XIdUjian' => $ujian->XIdUjian,
				]);

				$nilai  = $this->db->get('cbt_nilai');
				if ($nilai->num_rows() > 0) {
					$nilai = $nilai->row();
					?>
					<table>
						<tr>
							<td>
								Salah
							</td>
							<td>: <?= $nilai->XSalah; ?></td>
						</tr>
						<tr>
							<td>Benar</td>
							<td>: <?= $nilai->XBenar; ?></td>
						</tr>
						<tr>
							<td>Nilai</td>
							<td>: <?= $nilai->XTotalNilai; ?></td>
						</tr>
					</table>
					<?php
				}
				?>
			</td>
		</tr>
	</table>
	<p>
		<p>
			<div style="padding: 20px; align-content: center; width: 100%;">
				<b>Ketrangan Warna</b>
				<table style="width: 50%;">
					<tr>
						<td><div class="button-jawaban pilih-jawaban drinkcard-cc"> </div></td><td>Jawaban Dari Siswa</td>
					</tr>
					<tr>
						<td><div class="button-jawaban kunci-jawaban  drinkcard-cc"> </div></td><td>Kunci Jawaban Soal</td>
					</tr>
					<tr>
						<td><div class="jawaban-salah">1</div></td><td>Bernilai Salah</td>
					</tr>
				</table>

			</div>
		</p>
	</p>
	<table>
		<?php
		$jawaban = (array) $jawaban;
		$no=0;
		foreach ($jawaban as $j) {
			$no++;
			if ($j['XNilaiJawab'] != $j['XKunciJawaban']) {
				$salah="jawaban-salah";
			} else { $salah =""; }

			?>
			<tr>
				<td style="vertical-align: top; width: 40px"><div  class="<?= $salah; ?>"><?= $no; ?>.</div></td>
				<td>
					<p>
						<?= $j['XTanya']; ?>
						<?php
						if (!empty($j['XGambarTanya'])) {
							?>
							<p><img class='materialboxed responsive-img' style="max-width: 50%" src="<?= base_url("asset/uploads/cbt/gambar/".$j['XGambarTanya']); ?>"></p>
							<?php
						}
						if (!empty($j['XAudioTanya'])) {
							echo "<div style='display:block; padding :5px 10px;border-left:2px solid #333'>Audio : ".$j['XAudioTanya']."</div>";
						}
						if (!empty($j['XVideoTanya'])) {
							echo "<div style='display:block; padding :5px 10px;border-left:2px solid #333'>VIdeo : ".$j['XVideoTanya']."</div>";
						}
						?>
					</p>

					<p>
						<table>
							<?php
							$abc=range("A", "E");

							for ($i=0; $i < $ujian->XJumPilihan; $i++) { 

								if ($abc[$i] == $j['XJawaban']) {
									$pilih="pilih-jawaban";
								} else { $pilih =""; }

								if ($j['X'.$abc[$i]] == $j['XKunciJawaban']) {
									$kunci="kunci-jawaban";
								} else { $kunci =""; }

								
								?>
								<tr>
									<td width="1%" valign="top">
										<div data-no="<?= $j['XNomerSoal']; ?>" style="border: none;";  class="button-jawaban drinkcard-cc  <?= $kunci; ?> " data-nilai="<?= $j['X'.$abc[$i]]; ?>" >
										
									</td>
									<td width="1%" valign="top">
										<!-- tombol jawaban -->

										<div data-no="<?= $j['XNomerSoal']; ?>" style="border: none;";  class="button-jawaban drinkcard-cc <?= $abc[$i].' '.$pilih; ?> " data-nilai="<?= $j['X'.$abc[$i]]; ?>" >
											&nbsp;
										</div>
									</td>
									<td style="vertical-align: top">

										<!-- mengambil gambar untuk jawaban/ -->
										<?php
										if (!empty($j['XGambarJawab'.$j['X'.$abc[$i]]])) {
											?>
											<img class='materialboxed responsive-img' style="max-width: 40%" src="<?= base_url("asset/uploads/cbt/gambar/".$j['XGambarJawab'.$j['X'.$abc[$i]]]); ?>">
											<br/>
											<?php
										}
										?>
										<!-- mengambil jawban tulisan -->
										<?= $j['XJawab'.$j['X'.$abc[$i]]]; ?>


									</td>
								</tr>
								<?php
							}
							?>
						</table>
					</p>
				</td>
			</tr>
			<?php
		}
		?>
	</table>
</div>
